<!-- 雷达图 -->
<template>
    <el-card>
        <template #header> 资源效能 </template>
        <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted ,PropType,watch} from "vue";
import {TypeBbuHomeI} from '@/api/bbu_return/return_home/return_home_type'

const props = defineProps({
    id: {
        type: String,
        default: "radarChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
    data:{
    type: Object as PropType<TypeBbuHomeI>,
    required: true,
  }
});

let chart:echarts.EChartsType;

const options = {
    grid: {
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
    },
    legend: {
        x: "center",
        y: "bottom",
        data: ["CRAN前", "CRAN后"],
        textStyle: {
            color: "#999",
        },
    },

    radar: {
        // shape: 'circle',
        radius: "70%",
        indicator: [
            { name: "单机房板卡数", max: 5},
            { name: "单BBU基带数", max: 5 },
            { name: "单机房BBU数", max: 5 },
            { name: "单BBU板卡数", max: 5 },
            { name: "单机房基带数", max: 5 },
        ],
        axisName: {
            show: true,
            color: "#333",
            formatter: "{value}",
        },
    },
    series: [
        {
            name: "Budget vs spending",
            type: "radar",
            itemStyle: {
                borderRadius: 6,
                color: function (params: any) {
                    //自定义颜色
                    const colorList = [
                        "#409EFF",
                        "#67C23A",
                        "#E6A23C",
                        "#F56C6C",
                    ];
                    return colorList[params.dataIndex];
                },
            },
            data: [
                {
                    value: [1.1, 1.2, 1.3, 1.4, 1.5],
                    name: "CRAN前",
                    label: {
                        show: true,
                        formatter: function (params: any) {
                            return params.value;
                        },
                    },
                },
                {
                    value: [2.1, 2.2, 3.3, 3.4, 4.5],
                    name: "CRAN后",
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: function (params: any) {
                            return params.value;
                        },
                    },
                },
            ],
        },
    ],
};

watch(props,()=>{
    setupOption();
})

const setupOption=()=>{
    options.series[0].data[0].value=props.data.resourceListOfBefore
    options.series[0].data[1].value=props.data.resourceListOfAfter
    //最大值范围
    const indicatorMaxArray:number[]=[]
    props.data.resourceListOfBefore.forEach((value,index)=>{
        indicatorMaxArray[index]=parseInt(Math.max(value,props.data.resourceListOfAfter[index])*1.3+"")

    })
    options.radar.indicator.forEach((e,index)=>{
        e.max=indicatorMaxArray[index];
    })

    chart!.setOption(options);
}

onMounted(() => {
    chart = echarts.init(
        document.getElementById(props.id) as HTMLDivElement
    );
    setupOption();

    window.addEventListener("resize", () => {
        chart.resize();
    });
});
</script>
